<template>
  <!--  <HeaderDetail />-->
  <div style="margin: 10px 6% 0 6%">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Request Information</span>
          <el-col
                  :span="4"
                  :offset="12"
                  style="text-align: end; padding-right:10px"
          >
            <el-button type="info" @click="judgeURL()">BACK</el-button>
          </el-col>
        </div>
      </template>
      <el-row style="margin-bottom: 10px">
        <el-col :span="6">
          <span>Seq Name:</span>
          <el-input
            v-model="searchInfo.name"
            readonly
            placeholder="RV_CDI_p001"
            style="width: 95%"
          />
        </el-col>
        <el-col :span="6">
          <span>Registration Date:</span>
          <el-input
            v-model="searchInfo.date"
            placeholder="2021.12.03"
            style="width: 95%"
            readonly
          />
        </el-col>

        <el-col :span="6">
          <span>Type:</span>
          <el-input
            v-model="searchInfo.source"
            placeholder="plasmid"
            style="width: 95%"
            readonly
          />
        </el-col>
        <el-col :span="6">
          <span>Project Code:</span>
          <el-input
            v-model="searchInfo.cell"
            placeholder="CDI"
            style="width: 95%"
            readonly
          />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <span>Description:</span>
          <el-input
            v-model="searchInfo.compound"
            placeholder="ToxB"
            style="width: 95%"
            readonly
          />
        </el-col>
        <el-col :span="6">
          <span>CDS Structure:</span>
          <el-input
            v-model="searchInfo.time"
            placeholder="IL10/Hg0"
            style="width: 95%"
            readonly
          />
        </el-col>
        <el-col :span="12">
          <span>CDS Sequence:</span>
          <el-input
            v-model="searchInfo.note"
            placeholder="ATGCACAGCTCAGCTCTGCTGTGCTGCCTGGTGCTTCTGACCGGCGTGCGGGCCATGCACAGCTCAGCTCTGCTGTGCTGCCTGGTGCTTCTGACCGGCGTGCGGGCCGCTCTGCTGTGCTGCCTGGTGCTTCTGACCGGCGTGCGGGC"
            style="width: 95%"
            type="textarea"
            readonly
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- <el-card class="box-card" style="margin-top: 10px">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Cutoff Config</span>
        </div>
      </template>
      <el-row style="margin-bottom: 10px">
        <el-col :span="6">
          <span>Compound/Pool:</span>
          <el-input
            v-model="searchInfo.compound"
            placeholder="1515"
            style="width: 95%"
            readonly
          />
        </el-col>
        <el-col :span="6">
          <span>FC(&lt;=):</span>
          <el-input
            v-model="searchInfo.fc"
            style="width: 95%"
            placeholder=""
          />
        </el-col>
        <el-col :span="6">
          <span>pvalue(&lt;=):</span>
          <el-input
            v-model="searchInfo.pValue"
            style="width: 95%"
            placeholder=""
          />
        </el-col>
        <el-col :span="6">
          <span>FC2(>=):</span>
          <el-input
            v-model="searchInfo.fc2"
            style="width: 95%;"
            placeholder=""
          />
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 10px">
        <el-col :span="6">
          <span>Compound/Pool:</span>
          <el-input
            v-model="searchInfo.compound"
            placeholder="1869"
            style="width: 95%"
            readonly
          />
        </el-col>
        <el-col :span="6">
          <span>FC(&lt;=):</span>
          <el-input
            v-model="searchInfo.fc"
            style="width: 95%"
            placeholder=""
          />
        </el-col>
        <el-col :span="6">
          <span>pvalue(&lt;=):</span>
          <el-input
            v-model="searchInfo.pValue"
            style="width: 95%"
            placeholder=""
          />
        </el-col>
        <el-col :span="6">
          <span>FC2(>=):</span>
          <el-input
            v-model="searchInfo.fc2"
            style="width: 95%;"
            placeholder=""
          />
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :span="6"
          :offset="18"
          style="text-align: end;position: relative;top: 5px;"
        >
          <el-button type="primary" size="small" @click="SUBMIT()">SUBMIT</el-button>
        </el-col>
      </el-row>

    </el-card> -->
    <div style="margin-top: 10px">
      <el-row>
        <el-col :span="24">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span class="search-card-title">Approval History</span>
                <!--<div
                  style="width: 15%; position: relative; left: 35%; top: 3px"
                >
                  <span
                    style="position: relative; top: -5px; margin-right: 5px"
                  >Marker Category:</span>
                  <a
                    style="margin-right: 5px; cursor: pointer"
                    title="Favorite"
                  >
                    <td
                      style="
                        width: 20px;
                        height: 20px;
                        background-color: #ff7aae;
                      "
                      @click="pushColor('#ffd1e3')"
                    ></td>
                  </a>
                  <a style="margin-right: 5px; cursor: pointer" title="Known">
                    <td
                      style="
                        width: 20px;
                        height: 20px;
                        background-color: #2dd5c5;
                      "
                      @click="pushColor('#b3f0ea')"
                    ></td>
                  </a>
                  <a style="margin-right: 5px; cursor: pointer" title="Common">
                    <td
                      style="
                        width: 20px;
                        height: 20px;
                        background-color: #5691ff;
                      "
                      @click="pushColor('#bfd3f8')"
                    ></td>
                  </a>
                </div>
                <el-button type="primary" :icon="Download">
                  <el-icon><download /></el-icon>
                  Download Data
                </el-button>-->
              </div>
            </template>
            <el-table
              ref="multipleTable"
              :data="tableData"
              border
              style="width: 100%"
              :row-style="rowStyle"
            >
              <!-- <el-table-column type="selection" width="50" v-model="scope.row.isCheck"/> -->
              <el-table-column property="DMSO1" label="No" />
              <el-table-column property="pvalue1" label="Approval Time" />
              <el-table-column property="operator" label="Operator" />
              <el-table-column property="DMSO2" label="Operation" />
              <el-table-column property="pvalue2" label="Commernts" />
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { ref, computed } from "vue";
// import HeaderDetail from "../../components/HeaderDetail.vue";
import {Download } from "@element-plus/icons-vue";
import router from "@/router";
export default {
  name: "RequestRecorDetails",
  components: {
    // HeaderDetail,
    // RemoveFilled,
    Download,
  },
  setup() {
    const value2 = ref("");
    const judgeURL = () => {
      // router.push("/experimentManagement");
      window.history.go(-1);
    };
    const shortcuts = [
      {
        text: "Last week",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          return [start, end];
        },
      },
      {
        text: "Last month",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          return [start, end];
        },
      },
      {
        text: "Last 3 months",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          return [start, end];
        },
      },
    ];
    const search = ref("");
    const filterTableData = computed(() =>
      this.tableData.filter(
        (data) =>
          !search.value ||
          data.name.toLowerCase().includes(search.value.toLowerCase())
      )
    );
    return {
      shortcuts,
      search,
      filterTableData,
      judgeURL,
    };
  },
  data() {
    return {
      multipleSelection: [],
      readonly: true,
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      searchInfo: {
        date: "",
        commpound: "",
        source: "",
        cell: "",
        time: "",
        name: "",
        note: "",
        fc:"",
        pValue:"",
        fc2:""
      },
      currentPage: 1,
      pageSize: 10,
      options2: [
        {
          value: "1",
          label: "CRO",
        },
        {
          value: "2",
          label: "Internal",
        },
      ],
      options: [
        {
          value: "1",
          label: "Option1",
        },
        {
          value: "2",
          label: "Option2",
        },
        {
          value: "3",
          label: "Option3",
        },
      ],
      tableData: [
        {
          DMSO1: "1",
          pvalue1: "2022-02-25 10:02",
          operator: "Yang Xiang",
          DMSO2: "Request",
          pvalue2: "",
        },
        {
          DMSO1: "2",
          pvalue1: "2022-02-25 11:02",
          operator: "Sheng Zhu",
          DMSO2: "Return",
          pvalue2: "please modify CDS sequence...",
        },
        {
          DMSO1: "3",
          pvalue1: "2022-02-28 10:02",
          operator: "Yang Xiang",
          DMSO2: "Request",
          pvalue2: "",
        },
        {
          DMSO1: "4",
          pvalue1: "2022-02-28 10:02",
          operator: "Sheng Zhu",
          DMSO2: "Approve",
          pvalue2: "approve",
        }
      ],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // checkBox() {
    //   console.log(this.tableData);
    // },
    pushColor(color) {
      this.tableData.forEach((item, index) => {
        if (item.isCheck) {
          item.color = color;
          item.isCheck = false;
        }
      });
    },
    rowStyle({ row, rowIndex }) {
      const stylejson = {};
      if (row.color) {
        stylejson.background = row.color;
      }
      return stylejson;
    },
    handleSizeChange(val) {
      console.log(`${val} items per page`);
    },
    handleCurrentChange(val) {
      console.log(`current page: ${val}`);
    },
  },
};
</script>
<style scoped>
.search-card-title {
  font-size: 16px;
  font-weight: 500;
  /*width: 10%;*/
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.download-icon {
  position: relative;
  top: 3px;
  color: #166fe7;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.box-card {
  width: 100%;
}
.el-card /deep/.el-card__header {
  background-color: #64bce7;
  padding: 6px;
}
.el-card /deep/.el-card__body {
  padding: 8px;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px getCssVar("border-color");
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
